<template>
    <div class="hotContainer">
        <div class="result" v-if="$store.state.isSearchDetail">
            职位搜索结果<span>8</span>项
        </div>
        <div class="hotHeader" v-if="$store.state.isHot">
            <h4>热门职位</h4>
            <div class="search" @click="showSearch">
                <img
                    src=""
                    alt=""
                />
                <p>搜索</p>
            </div>
        </div>

        <div class="hotList">
            <div>
                <div
                    class="hotItem"
                    v-for="(item, index) in jobList"
                    :key="index"
                >
                    <div @click="goJobDetails(item.uuid, item)">
                        <div class="title">
                            <h4>{{ item.jobName }}</h4>
                            <p>{{ item.salary }}/月</p>
                        </div>
                        <div class="text">
                            <!-- <p>
                                {{ item.jobType }} | {{ item.jobEdu }} |
                                {{ item.jobExp }}
                            </p> -->
                            <p>
                                {{ item.jobEdu }} |
                                {{ item.jobExp }}
                            </p>
                            <p>{{ item.jobAddr }}-{{ item.jobDist }}</p>
                        </div>
                    </div>
                    <div class="text">
                        <p>{{ item.jobInfo }}</p>
                        <button
                            v-if="$store.state.isDel"
                            @click="delHot(item.uuid)"
                        >
                            删除
                        </button>
                        <button v-else @click="apply(item.uuid)">申请</button>
                    </div>
                </div>
            </div>
            <!-- 列表为空 -->
            <van-empty description="没有职位" v-if="jobList.length <= 0" />
        </div>
    </div>
</template>

<script>
import axios from "@/api/axios.js";
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
    props: ["jobList"],
    data() {
        return {};
    },
    methods: {
        //职位详情
        goJobDetails(uuid, item) {
            if (
                this.$store.state.isCompany &&
                !this.$store.state.isSearchDetail &&
                !this.$store.state.isHot
            ) {
                this.$router.push({
                    name: "PostRelease",
                    params: { uuid: uuid, unitData: JSON.stringify(item) },
                });
            } else {
                this.$router.push({name:'JobDetails',params:{data:JSON.stringify(item)}});
            }
        },
        showSearch() {
            //显示搜索结果页
            this.$store.state.isSearch = true;
        },
        // 删除按钮
        delHot(jobId) {
            Dialog.confirm({
                message: "是否删除?",
            })
                .then(() => {
                    axios
                        .post(`hkrc/unit/deleteJob?jobId=${jobId}`)
                        .then((res) => {
                            if (res.success) {
                                Toast.success("删除成功");
                                this.$emit('delete',true)
                            } else {
                                Toast.fail("删除失败");
                            }
                        });
                })
                .catch(() => {
                    console.log("出错了");
                });
        },
        //申请
        apply(uuid){
            console.log(uuid);
            //jobId == uuid  userId == 用户id
            axios.post(`/hkrc/unit/applyJob?jobId=${uuid}&userId=${this.$store.state.uuid}`).then(res=>{
                console.log(res);
                if(res.success){
                    Toast.success("申请成功");
                }else{
                    Toast.fail(res.msg);
                }
            })
        },
    },
    mounted() {
        console.log(this.jobList);
    },
    created() {},
};
</script>

<style lang="less" scoped>
.hotContainer {
    padding: 0 18.5px;
    .result {
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: left;
        font-size: 15px;
        font-weight: bold;
        color: #000000;
        span {
            font-size: 20px;
            color: red;
        }
    }
    .hotHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        h4 {
            font-size: 15px;
            font-weight: bold;
            color: #000000;
            line-height: 15px;
        }
        .search {
            padding: 3px 10px;
            display: flex;
            align-items: center;
            border-radius: 10px;
            background: #2c85f3;
            img {
                width: 13px;
                height: 13.5px;
                margin-right: 5px;
            }
            p {
                font-size: 14px;
                font-weight: bold;
                color: #ffffff;
            }
        }
    }
    .hotList {
        margin-top: 5px;
        background: #fff;
        .hotItem {
            padding: 12.5px;
            border-bottom: 1px solid #ddd;
            &:last-child {
                border-bottom: none;
            }
            .title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                h4 {
                    width: 70%;
                    font-size: 14px;
                    color: #333333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                p {
                    font-size: 11px;
                    font-weight: bold;
                    color: #f38541;
                }
            }
            .text {
                margin-top: 5px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                p {
                    width: 50%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 11px;
                    color: #666666;
                }
                button {
                    padding: 4px 15px;
                    font-size: 11px;
                    color: #fff;
                    background: rgba(#2c85f3, 0.7);
                    border-radius: 9px;
                }
            }
        }
    }
}
</style>